<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>{{ user_profile.username }} - 用户主页</title>
    {% load static %}
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'site/profile/main.css' %}">
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        {% include 'common/nav.html' %}
        <!-- 用户资料头部 -->
        <div class="profile-header">
            <div class="cover-image"
                style="background-image: url('/api/getimagebyid/?id={{ user_profile.topimage }}');">
                {% if is_own_profile %}
                <div class="cover-edit-overlay">
                    <button class="btn btn-outline-light" onclick="showEditCoverModal()">
                        <i class="bi bi-camera"></i> 更换头图
                    </button>
                </div>
                {% endif %}
            </div>
            <div class="profile-info d-flex align-items-end">
                <div class="avatar-container me-4">
                    <img src="/api/getimagebyid/?id={{ user_profile.avatar }}" alt="{{ user_profile.username }}的头像">
                    {% if is_own_profile %}
                    <div class="avatar-edit-overlay" onclick="showEditAvatarModal()">
                        <i class="bi bi-camera fs-4"></i>
                    </div>
                    {% endif %}
                </div>
                <div class="flex-grow-1">
                    <h1 class="user-name {% if user_profile.is_admin %}admin-name{% endif %}">
                        {{ user_profile.username }}
                        {% if user_profile.is_admin %}
                        <span class="admin-badge">管理员</span>
                        {% endif %}
                        {% if is_own_profile %}
                        <button class="btn btn-sm btn-outline-secondary ms-2" onclick="showEditNameModal()">
                            <i class="bi bi-pencil"></i> 编辑
                        </button>
                        {% endif %}
                    </h1>
                    <p class="text-muted">注册于 {{ user_profile.created_at|date:"Y年m月d日" }}</p>
                </div>
            </div>
        </div>

        <!-- 选项卡导航 -->
        <ul class="nav nav-tabs" id="userProfileTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview"
                    type="button" role="tab">概览</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="images-tab" data-bs-toggle="tab" data-bs-target="#images" type="button"
                    role="tab">图片 ({{ image_count }})</button>
            </li>
        </ul>

        <div class="tab-content" id="userProfileTabsContent">
            <!-- 概览选项卡 -->
            <div class="tab-pane fade show active" id="overview" role="tabpanel">
                <div class="row">
                    <!-- 左侧列 -->
                    <div class="col-lg-4">
                        <div class="stats-container">
                            <h3 class="stats-title">
                                <i class="bi bi-bar-chart"></i> 用户统计
                            </h3>
                            <div class="stat-item">
                                <span class="stat-label">上传图片数</span>
                                <span class="stat-value">{{ image_count }}</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">注册时间</span>
                                <span class="stat-value">{{ user_profile.created_at|date:"Y年m月d日" }}</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-label">用户ID</span>
                                <span class="stat-value">{{ user_profile.id }}</span>
                            </div>
                            {% if user_profile.is_admin %}
                            <div class="stat-item">
                                <span class="stat-label">用户权限</span>
                                <span class="stat-value">管理员</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <!-- 右侧列 -->
                    <div class="col-lg-8">
                        <div class="description-container position-relative">
                            <h3 class="stats-title">
                                <i class="bi bi-person-circle"></i> 个人介绍
                            </h3>
                            {% if is_own_profile %}
                            <button class="btn btn-sm btn-outline-primary edit-description-btn"
                                onclick="showEditDescriptionModal()">
                                <i class="bi bi-pencil"></i> 编辑
                            </button>
                            {% endif %}

                            {% if user_profile.description %}
                            <div class="description-content">{{ user_profile.description|safe }}</div>
                            {% else %}
                            <div class="text-muted">该用户暂无个人介绍</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图片选项卡 -->
            <div class="tab-pane fade" id="images" role="tabpanel">
                {% if user_images %}
                <div class="gallery-container">
                    {% for image in user_images %}
                    <div class="gallery-item">
                        <a href="/images/{{ image.id }}/">
                            <img src="{{ image.image_file.url }}" alt="{{ image.title }}" class="gallery-image">
                        </a>
                        <div class="gallery-info">
                            <div class="gallery-item-title">{{ image.title|default:"无标题" }}</div>
                            <div class="gallery-item-date">{{ image.date|date:"Y年m月d日" }}</div>
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页控件 -->
                {% if user_images.has_other_pages %}
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if user_images.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ user_images.previous_page_number }}&tab=images">上一页</a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">上一页</span>
                        </li>
                        {% endif %}

                        {% for i in user_images.paginator.page_range %}
                        {% if user_images.number == i %}
                        <li class="page-item active">
                            <span class="page-link">{{ i }}</span>
                        </li>
                        {% else %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ i }}&tab=images">{{ i }}</a>
                        </li>
                        {% endif %}
                        {% endfor %}

                        {% if user_images.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ user_images.next_page_number }}&tab=images">下一页</a>
                        </li>
                        {% else %}
                        <li class="page-item disabled">
                            <span class="page-link">下一页</span>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
                {% endif %}
                {% else %}
                <div class="empty-gallery">
                    <i class="bi bi-image" style="font-size: 3rem;"></i>
                    <h4 class="mt-3">暂无上传图片</h4>
                    <p class="text-muted">该用户还没有上传任何图片</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 编辑用户名模态框 -->
    <div class="modal fade" id="editNameModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑用户名</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>用户名</label>
                        <input type="text" class="form-control" id="editNameInput" value="{{ user_profile.username }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUserName()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑个人介绍模态框 -->
    <div class="modal fade" id="editDescriptionModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑个人介绍</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>个人介绍</label>
                        <textarea class="form-control" id="editDescriptionInput"
                            rows="6">{{ user_profile.description }}</textarea>
                        <small class="form-text text-muted">不支持 HTML 标签。暂不支持 Markdown 语法。</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUserDescription()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑头像模态框 -->
    <div class="modal fade" id="editAvatarModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择头像</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>输入图片ID</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="avatarImageId" placeholder="请输入图片ID" min="1">
                            <button class="btn btn-outline-secondary" type="button"
                                onclick="previewAvatarImage()">预览</button>
                        </div>
                    </div>

                    <div id="avatarPreviewContainer" class="text-center mb-3" style="display: none;">
                        <p class="text-muted">预览</p>
                        <img id="avatarPreview" class="img-fluid rounded" style="max-height: 200px;">
                    </div>
                    <div id="avatarPreviewError" class="text-danger mt-2" style="display: none;"></div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="useCurrentAvatar">
                        <label class="form-check-label" for="useCurrentAvatar">
                            使用当前头像（不更改）
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUserAvatar()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑头图模态框 -->
    <div class="modal fade" id="editCoverModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择头图</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group mb-3">
                        <label>输入图片ID</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="coverImageId" placeholder="请输入图片ID" min="1">
                            <button class="btn btn-outline-secondary" type="button"
                                onclick="previewCoverImage()">预览</button>
                        </div>
                    </div>

                    <div id="coverPreviewContainer" class="text-center mb-3" style="display: none;">
                        <p class="text-muted">预览</p>
                        <img id="coverPreview" class="img-fluid rounded" style="max-height: 200px;">
                    </div>
                    <div id="coverPreviewError" class="text-danger mt-2" style="display: none;"></div>
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="useCurrentCover">
                        <label class="form-check-label" for="useCurrentCover">
                            使用当前头图（不更改）
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveUserTopImage()">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script src="{% static 'site/profile/main.js' %}"></script>
</body>

</html>